<template>
    <!-- 转换配置 -->
    <div class="container">
        <div class="flex">
            <span class="title">发布能力类型：</span>
            <dict-selector :clearable="false" v-model="pzxxData.serviceType" :dictData="protocolTypeList" style="width: 240px;" />
        </div>
        <div class="flex">
            <span class="title">发布请求方式：</span>
            <el-input readonly v-model="pzxxData.httpRequestMethod" style="width: 240px" />
        </div>
        <div class="flex posr">
            <span class="title">源API类型：</span>
            <dict-selector :clearable="false" v-model="formData.originApiType" :dictData="protocolTypeList" style="width: 240px;" />
        </div>
        <!-- 源API类型为webservice展示 -->
        <div class="flex" v-if="formData.originApiType === '1'">
            <span class="title" style="opacity: 0">占位</span>
            <span style="width: 240px">
                <el-checkbox v-model="formData.isParamInSerialize">入参序列化</el-checkbox>
            </span>
        </div>
        <template v-if="formData.isParamInSerialize">
            <div class="flex">
                <span class="title">入参序列化类型：</span>
                <span style="width: 240px">
                    <el-radio v-model="formData.paramInSerializeType" label="1">XML</el-radio>
                    <!-- <el-radio v-model="formData.paramInSerializeType" label="2">JSON</el-radio> -->
                </span>
            </div>
            <div class="flex">
                <span class="title">入参名称：</span>
                <el-input v-model="formData.paramInSerializeName" style="width: 240px" clearable />
            </div>
        </template>
        <div class="flex" v-if="formData.originApiType === '1'">
            <span class="title" style="opacity: 0">占位</span>
            <span style="width: 240px">
                <el-checkbox v-model="formData.isParamOutSerialize">出参序列化</el-checkbox>
            </span>
        </div>
        <template v-if="formData.isParamOutSerialize">
            <div class="flex">
                <span class="title">出参序列化类型：</span>
                <span style="width: 240px">
                    <el-radio v-model="formData.paramOutSerializeType" label="1">XML</el-radio>
                    <!-- <el-radio v-model="formData.paramOutSerializeType" label="2">JSON</el-radio> -->
                </span>
            </div>
            <div class="flex">
                <span class="title">出参名称：</span>
                <el-input v-model="formData.paramOutSerializeName" style="width: 240px" clearable />
            </div>
        </template>
    </div>
</template>

<script>
import {serviceStore} from '@slc/store/service';
import {mapActions, mapState} from 'pinia';
export default {
    name: 'step-zhpz',
    computed: {
        ...mapState(serviceStore, [
            'protocolTypeList',
            'zhpzInfo',
            'pzxxInfo'
        ]),
        formData: {
            get() {
                return this.zhpzInfo
            }
            // set(val) {
            //     this.setZhpzInfo(val)
            // }
        },
        pzxxData: {
            get() {
                return this.pzxxInfo;
            }
            // set(val) {
            //     this.setPzxxInfo(val);
            // },
        },
    },
    watch: {
        formData: {
            handler(val) {
                this.setZhpzInfo(val)
            },
            deep: true
        },
        pzxxData: {
            handler(val) {
               this.setPzxxInfo(val)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions(serviceStore, [
            'setPzxxInfo',
            'setZhpzInfo'
        ]),
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    .posr {
        position: relative;
    }
    .posa {
        position: absolute;
        top: 50%;
        right: -80px;
        transform: translateY(-50%);
    }
    .flex {
        display: flex;
        align-items: center;
    }
    .title {
        width: 120px;
        text-align: right;
        font-size: 14px;
        color: #606266
    }
}
</style>